<template>
	<view class="search-container">
		<!-- 搜索关键字 -->
		<view class="search-box">
			<uni-icons type="left" size="18"></uni-icons>
			<uni-search-bar :focus="true" v-model="searchString" @input="input" :radius="5"
				cancelButton="none"></uni-search-bar>
			<text @click="add">搜索</text>
		</view>
		<hr>
		<!-- 历史记录   v-if = 搜索关键字.length!=0-->
		<view class="search-history" v-if="searchString.length==0">
			<!-- 标题区 -->
			<view class="search-history-title">
				<text>搜索历史</text>
				<uni-icons type="search" size="25"></uni-icons>
				<!-- 显示历史记录 -->
				<uni-tag :text="item" v-for="(item,index) in  historyList"></uni-tag>
			</view>
		</view>






		<!-- 热门搜索    v-else=搜索关键字.length==0  -->
		<view class="search-infor" v-else="searchString.length!=0">
			<text>热门搜索</text>
			<!-- 历史记录内容列表 -->
			<!-- <view class="search-history-list"> -->
			<view class="item" v-for="(item,index) in  filSearch" :key="index" @click="gotogoodslist(item.msgid)">
				<!-- 左侧标题 -->
				<view class="item-title">
					{{item.msgtitle}}
				</view>
				<!-- 右侧tag -->
				<uni-tag :text="item.msgid"></uni-tag>
			</view>

			<!-- <uni-tag class="item" :text="item.msgtitle" v-for="(item,index) in  searchList" :key="index"></uni-tag> -->
			<!-- </view>		 -->
		</view>
	</view>
</template>

<script>
	// 历史记录不去重   MAP   SET()

	// 刷新后无法存储   本地存储


	// 单击热门建议   --  跳转到商品展示页
	// 单击首页商品   --   跳转到商品展示页

	//               非tabbar页面  -- 
	//               自定义组件




	export default {
		data() {
			return {
				// 搜索历史的全部记录属性
				// 1.搜索历史记录  不允许存在重复记录
				// 2.每次当前搜索位置靠前
				// 
				searchList: [],
				// 根据input搜索框内输入的当前关键字，
				// 从来自异步交互返回结果中，进行模糊筛选，符合条件保留下来显示搜索页面
				// 				
				// 搜索关键字
				searchString: "",
				// 保存筛选后的关键字
				filSearch: [],
				// 保存历史记录变量
				historyList: []

			}
		},
		methods: {
			// clear(){
			// 	uni.showToast({
			// 		title:"搜索关键字",
			// 		icon:"none"
			// 	})			
			// },

			// 输入关键字，异步数据获取
			// e - value - 当前关键字
			input(e) {
				setTimeout(() => {
					// console.log(e);
					this.searchString = e
					this.getRes()
				}, 200)
			},
			// onload(){
			// 	// 异步方式获取搜索建议结果

			// 	 this.getRes()
			// },
			// 获取搜索建议结果
			async getRes() {
				// 如果没有输入任何信息，
				if (this.searchString == "") {
					// searchList = []
					this.searchList = []
					return
				} else {
					// 异步交互
					// promise
					// generator
					// async   await
					const {
						data: {
							searchSug: res
						}
					} = await uni.$http.get("http://localhost:3000/search", {
						query: this.searchString
					})
					//   message:[{},{}]
					//  status ： 200
					//  msg："获取成功"
					// console.log(res)
					if (res.meta.status == 200) {
						// 练习1： 拿关键字做条件针对返回结果做筛选
						// 符合条件呈现到搜索建议列表

						// 不要直接元数组
						//  

						//this.searchString     res.message   match()
						// ...[变量]   
						// ...arr1       从形式上展开成字符串						

						this.searchList = res.message




						// 根据关键字
						// this  --  普通函数this保存函数执行上下文
						//           箭头函数没有this，箭头函数定义父环境中的this
						this.filSearch = this.searchList.filter((item) => {
							// item进行字符串是否存在判断操作
							// str.search(参数)   参数在str中不存在，返回-1
							return item.msgtitle.search(this.searchString) > -1
						})
					}
				}
			},

			// 
			add() {
				// 单击”搜索“  -- searchList.push(searchString) 
				this.historyList.unshift(this.searchString)
				// 本地存储         持久性追加	
				// 返回类数组  -- 对象
				const set = new Set(this.historyList)
				// console.log(set)
				// set 转换数组  Array.from()

				this.historyList = Array.from(set)
				// console.log(this.historyList)	

				// 存储到本地  key:"[zhangsan,lisi,wangu]"
				// 将数组转换成字符串
				uni.setStorageSync("this.historyList", JSON.stringify(this.historyList))
				// 获取
				this.historyList = JSON.parse(uni.getStorageSync("this.historyList"))
			},

			gotogoodslist(value) {
				// console.log(value)
				uni.navigateTo({
					url: "/subpkg/goodslist/goodslist?query=" + value
				})
			}

		}
	}
</script>

<style lang="scss">
	.search-container {
		padding: 0 5px;
		background-color: #fff;

		.search-box {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			/* .uni-input{
				background-color: #fff;
			} */
		}

		.search-history {
			.search-history-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 17px;
				color: #8a8a8a;
				height: 35px;
				border-bottom: 1px solid #bababa;
			}

			// .search-history-list{
			// display: flex;
			// width: 100%;

			// }
		}

		.search-infor {
			.item {
				// width: 100%;
				margin: 2px 5px;
				padding: 4px 0;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #b8b8b8;
			}
		}
	}
</style>